<template>
  <section class="content">
    <Header :title="selectedProject.name">
      <div class="header_left" slot="left" @click="pickProject" style="font-size: 12px;">考试分类</div>
    </Header>
    <div class="main">
      <mescroll-vue
        class="mescroll_content"
        ref="mescroll"
        :down="mescrollDown"
        @init="mescrollInit"
      >
        <!-- 轮播图 -->
        <div class="swiper_box">
          <swiper :aspect-ratio="340/800" style="border-raduis: 5px;">
            <swiper-item class="swiper-demo-img" v-for="(item, index) in swiperData" :key="index">
              <img :src="item">
            </swiper-item>
          </swiper>
        </div>
        <!-- 课题导航 -->
        <div class="nav_box">
          <ul>
            <li @click="goTaoChang">
              <i></i>套餐
            </li>
            <li>
              <i @click="goClass"></i>课程
            </li>
            <li>
              <i @click="goKeCheng"></i>免费课
            </li>
            <li @click="goTiku">
              <i></i>题库
            </li>
          </ul>
        </div>
        <!-- 直播课 -->
        <div class="modal_box" v-if="freeList && freeList.length>0">
          <div class="title_box">
            <div class="left">
              <b class="line"></b>
              <span class="title">推荐免费课</span>
              <i class="vertical_line">|</i>
              <span class="sub_title">考点重点精准解析</span>
            </div>
            <div class="right">
              <a href="javascript:void(0)" class="btn" @click="goKeCheng">全部课程</a>
            </div>
          </div>
          <div class="modal_main">
            <ul>
              <li v-for="(item,index) in freeList" :key="index" @click="goKechengDetail(item.id)">
                <img :src="item.litpic" :alt="item.title">
                <p class="bottom">
                  <span class="nums">{{item.viewed}}人学习</span>
                  <span class="type">{{item.price === 0 ? '免费' : `${item.price}卷`}}</span>
                </p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 刷题 -->
        <div class="modal_box">
          <div class="title_box">
            <div class="left">
              <b class="line"></b>
              <span class="title">刷题</span>
            </div>
            <div class="right">
              <a href="javascript:void(0)" class="btn" @click="goTiku">进入题库</a>
            </div>
          </div>
          <div class="modal_main">
            <div class="score_box">
              <p>
                <b
                  class="nums"
                  style="color: #1070ff;"
                >{{examCount.numbers && examCount.numbers.answered}}</b>
                <b class="name">完成题数</b>
              </p>
              <span class="line"></span>
              <p>
                <b
                  class="nums"
                  style="color: rgb(254, 72, 66);"
                >{{examCount.ratio && Math.ceil(examCount.ratio.corrected)}}%</b>
                <b class="name">正确率</b>
              </p>
            </div>
            <a href="javascript:void(0);" class="app_button" @click="goTiku">开始刷题</a>
          </div>
        </div>
        <!-- 继续上次练习 -->
        <div class="modal_box" v-if=" examCount.items &&  examCount.items.length>0">
          <div class="title_box">
            <div class="left">
              <b class="line"></b>
              <span class="title">刷题</span>
            </div>
            <div class="right">
              <a href="javascript:void(0)" class="btn" @click="goTiku">进入题库</a>
            </div>
          </div>
          <div class="modal_main jixu_answer">
            <div v-for="(item, index) in examCount.items" :key="index" @click="goPlan(item)">
              <h3>{{item.title}}</h3>
              <p>已完成:{{item.answered}}/{{item.total}}</p>
              <a href="javascript:void(0);" class="app_button">继续做题</a>
            </div>
          </div>
        </div>
        <!-- 推荐班课 -->
        <div class="modal_box" v-if="taoChangData && taoChangData.length>0">
          <div class="title_box">
            <div class="left">
              <b class="line"></b>
              <span class="title">推荐套餐</span>
            </div>
            <div class="right">
              <a href="javascript:void(0)" class="btn" @click="goTaoChang">更多</a>
            </div>
          </div>
          <div
            class="modal_main tuijian_box"
            @click="goTaochangDetail(item)"
            v-for="(item,index) in taoChangData"
            :key="index"
          >
            <img :src="item.litpic" alt="课程">
            <div class="title" style="text-align: left;">{{item.sname}}-{{item.name}}</div>
            <div class="price_box">
              <span class="price">¥{{item.price}}</span>
              <span class="type_box">
                <a href="javascript:void(0);" class="app_btn2">{{item.name}}</a>
              </span>
            </div>
          </div>
        </div>
      </mescroll-vue>
    </div>
  </section>
</template>
<script>
import Header from "../../components/Header/Header";
import moment from "moment";
import { Swiper, SwiperItem } from "vux";
import MescrollVue from "mescroll.js/mescroll.vue";
import {
  getTaoChangList,
  getKeChengData,
  reqGetExamCount,
  reqFlash
} from "../../api/index.js";

const imgList = [
  "https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg",
  "https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg",
  "https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg"
];

export default {
  data() {
    return {
      title: {},
      swiperData: [],
      swiperIndex: 0,
      selectedProject: {},
      taoChangData: [],
      freeList: [],
      examCount: {},
      mescrollDown: {
        callback: this.downCallback,
        auto: true,
        isBoth: false,
        textInOffset: "下拉刷新",
        textOutOffset: "松开立即刷新",
        textLoading: `<p>正在加载数据中...</p><p>最后更新: 今天${moment().format(
          "HH:mm"
        )}</p>`
      }
    };
  },
  mounted() {
    const p = JSON.parse(localStorage.getItem("selectedProject"));
    this.selectedProject = p;
    this.getTaoChangData();
    this.getFreeData();
    this.getCount();
    this.getFlash();
  },
  methods: {
    // 继续做题
    goPlan(data) {
      console.log("data", data);
      let isExam;
      let type = data.tags && data.tags.toLowerCase();
      if (type === "calendar" || type === "plan") {
        isExam = 1;
      }
      this.$router.push({
        path: "/question",
        query: { id: data.examId, isExam: isExam, type: type }
      });
    },
    async getFlash() {
      let result = await reqFlash();
      if (result.code === 1) {
        this.swiperData = result.data.wap;
      } else {
        this.$vux.toast.show(result.msg);
      }
    },
    async getCount() {
      let result = await reqGetExamCount();
      if (result.code === 1) {
        this.examCount = result.data;
      } else {
        this.$vux.toast.show(result.msg);
      }
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    downCallback(mescroll) {
      setTimeout(function() {
        mescroll.endSuccess();
      }, 1000);
    },
    pickProject() {
      this.$router.push("pickProject");
    },
    goKechengDetail(data) {
      this.$router.push({ path: "/kechengDetail", query: { id: data } });
    },
    goTaochangDetail(data) {
      this.$router.push({ path: "/taochangDetail", query: { cid: data.id } });
    },
    goTaoChang() {
      this.$router.push({ path: "/taochang" });
    },
    goKeCheng() {
      this.$router.push({ path: "/kecheng" });
    },
    goTiku() {
      this.$router.push({ path: "/tiku" });
    },
    goClass() {
      this.$router.push({ path: "/classList" });
    },
    async getTaoChangData() {
      let result = await getTaoChangList({
        sid: this.selectedProject.id,
        isRecommend: 1
      });
      if (result.code === 1) {
        this.taoChangData = result.data;
      } else {
        this.$vux.toast.show(result.msg);
      }
    },
    async getFreeData() {
      let result = await getKeChengData({
        sid: this.selectedProject.id,
        listType: "NORMAL",
        pageIndex: 0,
        pageSize: 0,
        listRows: 10
      });
      if (result.code === 1) {
        this.freeList = result.data.items;
      } else {
        this.$vux.toast.show(result.msg);
      }
    }
  },
  components: {
    Header,
    Swiper,
    SwiperItem,
    MescrollVue
  }
};
</script>
<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  width: 100%;
  height: 100%;
  position: relative;
}
.header_left {
  .mix-flex-center();
  font-size: 14px;
}
.main {
  width: 100%;
  height: calc(~"100% - 96px");
}

.swiper_box {
  padding: 10px;
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
}
.swiper_box /deep/ .vux-slider {
  border-radius: 5px;
}
.nav_box {
  width: 100%;
  position: relative;
  background: #fff;
  padding: 10px 20px 20px 20px;
  box-sizing: border-box;
  ul {
    border-radius: 8px;
    height: 80px;
    .mix-flex-center();
    border: 1px solid #ddd;
    box-shadow: 0 0 0.267rem rgba(0, 0, 0, 0.3);
    li {
      display: inline-block;
      flex: 1;
      .mix-flex-center();
      flex-direction: column;
      i {
        background: url(../../assets/home/icon_01.png);
        width: 27px;
        height: 30px;
        margin: 12px 0 6px;
      }
    }
  }
}
.modal_box {
  padding: 20px;
  background: #fff;
  .title_box {
    height: 30px;
    line-height: 30px;
    .mix-flex-center();
    margin-bottom: 10px;
    .left {
      flex: 1;
      height: 100%;
      .mix-flex-center();
      justify-content: flex-start;
      .line {
        width: 5px;
        height: 20px;
        background: @red;
        margin: 0 10px 0 5px;
        display: inline-block;
      }
      .title {
        font-size: 16px;
        text-align: left;
        .mix-text-overflow();
      }
      .vertical_line {
        font-size: 12px;
        color: @font-regular;
        padding: 0 6px;
      }
      .sub_title {
        font-size: 12px;
        color: @font-regular;
        .mix-text-overflow();
      }
    }
    .right {
      height: 100%;
      width: 80px;
      text-align: right;
      .btn {
        display: inline-block;
        color: @red;
        padding: 0 10px;
        border-radius: 30px;
        font-size: 12px;
        background: @red-bg;
        text-align: center;
        transform: scale(0.8);
        .mix-text-overflow();
      }
    }
  }
}
.modal_main {
  width: 100%;
  overflow: hidden;
  text-align: center;
  ul {
    width: 100%;
    overflow: auto;
    // .mix-flex-center();
    // flex-wrap: nowrap;
    white-space: nowrap;
    li {
      // flex: 0 0 130px;
      width: 130px;
      padding-right: 10px;
      display: inline-block;
      img {
        width: 100%;
        height: 75px;
        border-radius: 5px;
        margin-bottom: 5px;
      }
      .bottom {
        .mix-flex-center();
        .nums,
        .type {
          flex: 1;
          font-size: 10px;
        }
        .nums {
          text-align: left;
          color: @font-regular;
          // transform: scale(0.8);
          white-space: nowrap;
        }
        .type {
          text-align: right;
          color: @red;
        }
      }
    }
  }
}
.score_box {
  .mix-flex-center();
  margin-bottom: 15px;
  .line {
    height: 50px;
    width: 1px;
    background: @border-base;
  }
  p {
    flex: 1;
    text-align: center;
    .mix-flex-center;
    flex-direction: column;
    .nums {
      font-size: 30px;
    }
  }
}
.app_button {
  display: inline-block;
  width: 30%;
  padding: 5px 0;
  box-sizing: border-box;
  background: @red-bg;
  border-radius: 5px;
  color: @red;
  text-align: center;
}

// 继续答题
.jixu_answer {
  h3,
  p {
    text-align: left;
  }
  h3 {
    font-size: 15px;
    line-height: 20px;
    padding: 15px 0 10px;
  }
  p {
    color: @font-regular;
    font-size: 10px;
    margin-bottom: 15px;
  }
}
// 推荐班课
.tuijian_box {
  img {
    width: 100%;
    height: 180px;
    border-radius: 3px;
  }
  .price_box {
    .mix-flex-center();
    padding: 5px 0 10px;
    .price {
      flex: 1;
      font-size: 20px;
      color: @red;
      text-align: left;
    }
    .type_box {
      flex: 1;
      text-align: right;
      .app_btn2 {
        border: 1px solid @primary;
        font-size: 10px;
        padding: 2px 5px;
        color: @primary;
      }
    }
  }
  .footer {
    .attention {
      display: inline-block;
      width: 100%;
      text-align: left;
      font-size: 16px;
    }
  }
}

.swiper-demo-img {
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
    
    
